<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			小结
			v-for指令:
			1.用于展示列表数据
			2.语法：v-for="(item, index) in xxx" :key="yyy"
			3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		 -->
		<!-- 创建容器 -->
		<div id="root">
			<h2>遍历对象</h2>
			<ul>
				<li v-for="(p,index) in personList" :key="p.id">
					{{p}}--{{index}}
				</li>
			</ul>
			<h2>遍历字符串</h2>
			<ul>
				<li v-for="(char,index) in str" :key="index">
					{{char}}--{{index}}
				</li>
			</ul>
			<h2>遍历数字</h2>
			<ul>
				<li v-for="(number,index) in 5" :key="index">
					{{number}}---{{index}}
				</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			
			//创建vue实例
			new Vue({
				el:'#root',
				data:{
					personList:[
						{
							id:'001',
							name:'张三',
							age:18
						},
						{
							id:'002',
							name:'张四',
							age:19
						},
						{
							id:'003',
							name:'张五',
							age:20
						}
					],
					str:'hello'

				}
			})
		</script>
	</body>
</html>
